import React, { useState, useRef } from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';

import { ItemHRow, InputModal } from '../compoment';
import RNEChartsPro from "react-native-echarts-pro";
import { compose } from 'redux';
import { connect } from 'react-redux';
import { tcType } from '../utils/type'

const SettingScrollView = ({
    kmStr,
    selIndex,
    allData,
    sliderWithIndex,
    setParaWithIndex,
    ...rest
}) => {

    var tmpIndex = 0;
    switch (selIndex) {
        case 0:
            tmpIndex = allData[1][31];
            break;
        case 1:
            tmpIndex = allData[3][31];
            break;
        case 2:
            tmpIndex = allData[5][31];
            break;
        case 3:
            tmpIndex = allData[7][31];
            break;
    }

    const [tcIndex, setTcIndex] = useState(tmpIndex);
    var setArrData = []

    const echartsRef = useRef();
    // var pointData = [];
    const data = [
        [1, tcType[tcIndex][0]],
        [2, tcType[tcIndex][1]],
        [3, tcType[tcIndex][2]],
        [4, tcType[tcIndex][3]],
        [5, tcType[tcIndex][4]],
        [6, tcType[tcIndex][5]],
        [7, tcType[tcIndex][6]],
        [8, tcType[tcIndex][7]],
        [9, tcType[tcIndex][8]],
        [10, tcType[tcIndex][9]],
        [11, tcType[tcIndex][10]],
        [12, tcType[tcIndex][11]],
        [13, tcType[tcIndex][12]],
        [14, tcType[tcIndex][13]],
        [15, tcType[tcIndex][14]],
        [16, tcType[tcIndex][15]]
    ];
    option = {
        title: {
            text: 'Power/Throttle',
            left: 'center',
            textStyle: {
                fontSize: 14,
                color: '#060606',
                fontWeight: "400",
                // fontFamily: 'Moldiv'
            },
            padding: [
                10, 0, 0, 0
            ]
        },
        xAxis: {
            min: 1,
            max: 16,
            type: 'value',
            interval: 1
            // axisLine: { onZero: false },
            // axisLabel: { formatter: '{value}%' }
        },
        yAxis: {
            min: 0,
            max: 100,
            type: 'value',
            axisLine: { onZero: false },
            axisLabel: { formatter: '{value}%' }
        },
        series: [
            {
                id: 'a',
                type: 'line',
                smooth: true,
                symbolSize: 10,
                data: data,
                color: '#CFFF36',
                // label: {
                //     show: true,
                //     position: 'top',
                //     distance: 0,
                //     // formatter: '{@[1]}%'
                // },
            }
        ]
    };

    switch (selIndex) {
        case 0:
            setArrData = [
                {
                    id: 's1',
                    sv: allData[1][14] == 1 ? 100 : (allData[1][11] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Top Speed',
                    type: 1,
                },
                {
                    id: 's2',
                    sv: allData[1][10] == 1 ? 100 : (allData[1][7] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Power',
                    type: 1,
                },
                {
                    id: 's3',
                    sv: allData[1][6] == 1 ? 100 : (allData[1][3] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Torque',
                    type: 1,
                },
                {
                    id: 's4',
                    sv: allData[1][18] == 1 ? 100 : (allData[1][15] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Initial Throttle Response',
                    type: 1,
                },
                {
                    id: 's5',
                    sv: allData[1][22] == 1 ? 100 : (allData[1][19] / 2.56).toFixed(1),
                    unit: '%',
                    des: 'Regenerative Braking',
                    type: 1,
                },
                {
                    id: 's6',
                    sv: allData[1][31],
                    max: 20,
                    unit: '/20',
                    des: 'Throttle Curve',
                    type: 5,
                }];
            break;
        case 1:
            setArrData = [
                {
                    id: 's1',
                    sv: allData[3][14] == 1 ? 100 : (allData[3][11] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Top Speed',
                    type: 1,
                },
                {
                    id: 's2',
                    sv: allData[3][10] == 1 ? 100 : (allData[3][7] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Power',
                    type: 1,
                },
                {
                    id: 's3',
                    sv: allData[3][6] == 1 ? 100 : (allData[3][3] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Torque',
                    type: 1,
                },
                {
                    id: 's4',
                    sv: allData[3][18] == 1 ? 100 : (allData[3][15] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Initial Throttle Response',
                    type: 1,
                },
                {
                    id: 's5',
                    sv: allData[3][22] == 1 ? 100 : (allData[3][19] / 2.56).toFixed(1),
                    unit: '%',
                    des: 'Regenerative Braking',
                    type: 1,
                },
                {
                    id: 's6',
                    sv: allData[3][31],
                    max: 20,
                    unit: '/20',
                    des: 'Throttle Curve',
                    type: 5,
                }];
            break;
        case 2:
            setArrData = [
                {
                    id: 's1',
                    sv: allData[5][14] == 1 ? 100 : (allData[5][11] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Top Speed',
                    type: 1,
                },
                {
                    id: 's2',
                    sv: allData[5][10] == 1 ? 100 : (allData[5][7] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Power',
                    type: 1,
                },
                {
                    id: 's3',
                    sv: allData[5][6] == 1 ? 100 : (allData[5][3] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Torque',
                    type: 1,
                },
                {
                    id: 's4',
                    sv: allData[5][18] == 1 ? 100 : (allData[5][15] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Initial Throttle Response',
                    type: 1,
                },
                {
                    id: 's5',
                    sv: allData[5][22] == 1 ? 100 : (allData[5][19] / 2.56).toFixed(1),
                    unit: '%',
                    des: 'Regenerative Braking',
                    type: 1,
                },
                {
                    id: 's6',
                    sv: allData[5][31],
                    max: 20,
                    unit: '/20',
                    des: 'Throttle Curve',
                    type: 5,
                }];
            break;
        case 3:
            setArrData = [
                {
                    id: 's1',
                    sv: allData[7][14] == 1 ? 100 : (allData[7][11] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Top Speed',
                    type: 1,
                },
                {
                    id: 's2',
                    sv: allData[7][10] == 1 ? 100 : (allData[7][7] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Power',
                    type: 1,
                },
                {
                    id: 's3',
                    sv: allData[7][6] == 1 ? 100 : (allData[7][3] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Torque',
                    type: 1,
                },
                {
                    id: 's4',
                    sv: allData[7][18] == 1 ? 100 : (allData[7][15] / 2.56).toFixed(0),
                    unit: '%',
                    des: 'Initial Throttle Response',
                    type: 1,
                },
                {
                    id: 's5',
                    sv: allData[7][22] == 1 ? 100 : (allData[7][19] / 2.56).toFixed(1),
                    unit: '%',
                    des: 'Regenerative Braking',
                    type: 1,
                },
                {
                    id: 's6',
                    sv: allData[7][31],
                    max: 20,
                    unit: '/20',
                    des: 'Throttle Curve',
                    type: 5,
                }];
            break;
    }

    const renderSetItem = ({ item, index }) => (
        <ItemHRow
            key={item.id}
            data={item}
            sliderWithIndex={(newNumber) => {
                sliderWithIndex(index, newNumber)
                // if (index == 5) {
                //     console.log('需要图表联动:' + newNumber);
                //     setTcIndex(newNumber);
                // }
            }}
            onStartTouch={() => { }}
            onNeedRefTC={(newNumber) => {
                setTcIndex(newNumber);
            }}
        />
    );

    return (
        <ScrollView style={{ flex: 1, width: '100%', marginTop: 20 }} showsVerticalScrollIndicator={false}>
            {
                setArrData.map((item, index) => {
                    return (renderSetItem({ item, index }))
                })
            }
            <RNEChartsPro ref={echartsRef} height={300} option={option} />
            <TouchableOpacity activeOpacity={1} style={{
                // position: 'absolute',
                // bottom: 20,
                // left: 20,
                // right: 20,
                margin: 20,
                height: 50,
                backgroundColor: '#CFFF36',
                alignItems: 'center',
                justifyContent: 'center'
            }} onPress={() => {
                // setConnectStatus(2); 
                // navigation.navigate('Bluetest');
                setParaWithIndex();
                // 检查权限 全部ok  开始扫描 弹出列表
            }}>
                <Text style={{
                    fontSize: 16,
                    color: '#060606',
                    fontWeight: "400",
                    fontFamily: 'Moldiv'
                }}>Confirm Settings</Text>
            </TouchableOpacity>
        </ScrollView>
    );
};

// export default SettingScrollView;


const mapStateToProps = ({
    device: {
        kmStr
    },
}) => ({
    kmStr
});

const enhance = compose(
    connect(mapStateToProps, {}),
);
export default enhance(SettingScrollView);